{extend name="base"/}
{block name="resources"}
<style type="text/css">
	.examples {cursor: pointer;}
	.label-width {width: 80px; }
	.layui-layout-admin.admin-style-2 .layui-body .layui-tab + .body-content {padding-top: 63px !important;}
</style>
{/block}
{block name="main"}
<div class="layui-form">
	<div class="layui-form-item">
		<label class="layui-form-label">网站标题：</label>
		<div class="layui-input-block">
			<input type="text" name="site_name" autocomplete="off" value="{$shop_info.site_name}" class="layui-input len-long">
		</div>
		<div class="word-aux"><p>说明：该标题在管理端头部标题展示，形式为菜单名-网站标题。</p></div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label img-upload-lable">网站logo：</label>
		<div class="layui-input-block img-upload">
			<div class="upload-img-block">
				<div class="upload-img-box {if condition="!empty($shop_info.logo)"}hover{/if} ">
					<div class="upload-default" id="logoUpload">
						{if condition="!empty($shop_info.logo)"}
							<div id="preview_logoUpload" class="preview_img">
								<img layer-src src="{:img($shop_info.logo)}" class="img_prev"/>
							</div>
						{else/}
						<div class="upload">
							<i class="iconfont iconshangchuan"></i>
							<p>点击上传</p>
						</div>
						{/if}
					</div>
					<div class="operation">
						<div>
							<i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
							<i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
						</div>
						<div class="replace_img js-replace">点击替换</div>
					</div>
					<input type="hidden" name="logo" value="{$shop_info.logo ?? ''}"/>
				</div>
				<!-- <p id="logoUpload" class=" {if condition="$shop_info.logo"} replace {else/} no-replace{/if}">替换</p>
				<input type="hidden" name="logo" value="{$shop_info.logo}"/>
				<i class="del {if condition="$shop_info.logo"}show{/if}">x</i> -->
			</div>
		</div>

		<div class="word-aux">
			<p>建议图片尺寸：200*60像素；图片格式：jpg、png、jpeg</p>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label img-upload-lable">方形logo：</label>
		<div class="layui-input-block img-upload">
			<div class="upload-img-block">
				<div class="upload-img-box {if condition="!empty($shop_info.logo_square)"}hover{/if} ">
					<div class="upload-default" id="logo_squareUpload">
						{if condition="!empty($shop_info.logo_square)"}
							<div id="preview_logo_squareUpload" class="preview_img">
								<img layer-src src="{:img($shop_info.logo_square)}" class="img_prev"/>
							</div>
						{else/}
						<div class="upload">
							<i class="iconfont iconshangchuan"></i>
							<p>点击上传</p>
						</div>
						{/if}
					</div>
					<div class="operation">
						<div>
							<i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
							<i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
						</div>
						<div class="replace_img js-replace">点击替换</div>
					</div>
					<input type="hidden" name="logo_square" value="{$shop_info.logo_square ?? ''}"/>
				</div>
			</div>
		</div>

		<div class="word-aux">
			<p>建议图片尺寸：80*80像素；图片格式：jpg、png、jpeg。用于分享使用。</p>
		</div>
	</div>


	<!--<div class="layui-form-item">-->
		<!--<label class="layui-form-label img-upload-lable">店铺头像：</label>-->
		<!--<div class="layui-input-block img-upload">-->
			<!--<div class="upload-img-block square">-->
				<!--<div class="upload-img-box" id="avatarUpload">-->
					<!--{if condition="$shop_info.avatar"}-->
						<!--<img src="{:img($shop_info.avatar)}" />-->
					<!--{else/}-->
						<!--<div class="upload-default">-->
<!--							<i class="iconfont iconshangchuan"></i>-->
							<!--<p>点击上传</p>-->
						<!--</div>-->
					<!--{/if}-->
				<!--</div>-->
			<!--</div>-->
			<!--<input type="hidden" name="banner" value="{$shop_info.banner}"/>-->
		<!--</div>-->

		<!--<div class="word-aux">-->
			<!--<p>建议图片尺寸：800*800像素；图片格式：jpg、png、jpeg。</p>-->
		<!--</div>-->
	<!--</div>-->

	<!--<div class="layui-form-item">-->
		<!--<label class="layui-form-label img-upload-lable">店铺大图：</label>-->
		<!--<div class="layui-input-block img-upload">-->
			<!--<div class="upload-img-block">-->
				<!--<div class="upload-img-box" id="bannerUpload">-->
					<!--{if condition="$shop_info.avatar"}-->
						<!--<img src="{:img($shop_info.banner)}" />-->
					<!--{else/}-->
						<!--<div class="upload-default">-->
<!--							<i class="iconfont iconshangchuan"></i>-->
							<!--<p>点击上传</p>-->
						<!--</div>-->
					<!--{/if}-->
				<!--</div>-->
			<!--</div>-->
			<!--<input type="hidden" name="avatar" value="{$shop_info.avatar}"/>-->
		<!--</div>-->
		<!--<div class="word-aux">-->
			<!--<p>建议图片高度：150像素；图片格式：jpg、png、jpeg。</p>-->
		<!--</div>-->
	<!--</div>-->

	<div class="layui-form-item">
		<label class="layui-form-label">网站关键字：</label>
		<div class="layui-input-block">
			<input type="text" name="seo_keywords" autocomplete="off" value="{$shop_info.seo_keywords}" class="layui-input len-long">
		</div>
		<div class="word-aux"><p>多个关键字之间用英文“,”隔开</p></div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">网站描述：</label>
		<div class="layui-input-block">
			<textarea name="seo_description" class="layui-textarea len-long" maxlength="150">{$shop_info.seo_description}</textarea>
		</div>
	</div>

    <div class="layui-form-item">
	   <label class="layui-form-label">服务电话：</label>
	   <div class="layui-input-block">
		   <input type="text" name="site_tel" autocomplete="off" value="{$shop_info.site_tel}" class="layui-input len-long">
	   </div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">商城状态：</label>
		<div class="layui-input-block">
			<label class="layui-form-label label-width">pc端：</label>
			<div>
				<input type="radio" name="shop_pc_status" value="1" title="开启" {if isset($shop_status.shop_pc_status) && $shop_status.shop_pc_status == 1} checked {/if}>
				<input type="radio" name="shop_pc_status" value="0" title="关闭" {if isset($shop_status.shop_pc_status) && $shop_status.shop_pc_status == 0} checked {/if}>
			</div>
			<label class="layui-form-label label-width">h5端：</label>
			<div>
				<input type="radio" name="shop_h5_status" value="1" title="开启" {if isset($shop_status.shop_h5_status) && $shop_status.shop_h5_status == 1} checked {/if}>
				<input type="radio" name="shop_h5_status" value="0" title="关闭" {if isset($shop_status.shop_h5_status) && $shop_status.shop_h5_status == 0} checked {/if}>
			</div>
			<label class="layui-form-label label-width">小程序端：</label>
			<div>
				<input type="radio" name="shop_weapp_status" value="1" title="开启" {if isset($shop_status.shop_weapp_status) && $shop_status.shop_weapp_status == 1} checked {/if}>
				<input type="radio" name="shop_weapp_status" value="0" title="关闭" {if isset($shop_status.shop_weapp_status) && $shop_status.shop_weapp_status == 0} checked {/if}>
			</div>
		</div>
		<div class="word-aux">
			<p>商城状态为关闭时，用户将无法访问商城。<a onclick="showDemo()" class="examples text-color">查看示例</a></p>
		</div>
	</div>


	<!--<div class="layui-form-item">-->
		<!--<label class="layui-form-label">工作日：</label>-->
		<!--<div class="layui-input-block" id="work_week">-->
			<!--<input type="checkbox" name="work_week1" value="1" title="周一" lay-skin="primary">-->
			<!--<input type="checkbox" name="work_week2" value="2" title="周二" lay-skin="primary">-->
			<!--<input type="checkbox" name="work_week3" value="3" title="周三" lay-skin="primary">-->
			<!--<input type="checkbox" name="work_week4" value="4" title="周四" lay-skin="primary">-->
			<!--<input type="checkbox" name="work_week5" value="5" title="周五" lay-skin="primary">-->
			<!--<input type="checkbox" name="work_week6" value="6" title="周六" lay-skin="primary">-->
			<!--<input type="checkbox" name="work_week7" value="7" title="周日" lay-skin="primary">-->
		<!--</div>-->
	<!--</div>-->
	<!--<div class="layui-form-item">-->
	<!--<div class="layui-inline">-->
		<!--<label class="layui-form-label">营业时间：</label>-->
		<!--<div class="layui-input-inline">-->
			<!--<input type="text" class="layui-input" id="start_time" placeholder="开始时间" autocomplete="off" value="{if $shop_info.start_time} {$shop_info.start_time} {/if}" readonly>-->
			<!--<i class=" iconrili iconfont calendar"></i>-->
			<!--<input type="hidden" class="layui-input start-time" name="start_time">-->
		<!--</div>-->
		<!--<div class="layui-input-inline">-</div>-->
		<!--<div class="layui-input-inline">-->
			<!--<input type="text" class="layui-input" id="end_time" placeholder="结束时间" autocomplete="off" value="{if $shop_info.end_time} {$shop_info.end_time} {/if}" readonly>-->
			<!--<i class=" iconrili iconfont calendar"></i>-->
			<!--<input type="hidden" class="layui-input end-time" name="end_time">-->
		<!--</div>-->
	<!--</div>-->
	<!--</div>-->

	<div class="form-row">
		<button class="layui-btn" lay-submit lay-filter="save">保存</button>
	</div>
	<a id="btom_two"></a>
	<a id="btom_three"></a>
</div>
{/block}
{block name="script"}
<script>
	/**
	 * 初始化营业时间
	 */
	var startTime = "{$shop_info.start_time}",
		endTime = "{$shop_info.end_time}";
	var saveData = null;
	var totalUploadNum = 0;
	var completeUploadNum = 0;
	var logo_upload,logo_square_upload;
	if (Number(startTime)){
		$("#start_time").val(ns.time_to_date(startTime, "h:m:s"));
		$(".start-time").val(startTime);
	}

	if (Number(endTime)){
		$("#end_time").val(ns.time_to_date(endTime, "h:m:s"));
		$(".end-time").val(endTime);
	}

	layui.use(['form', 'laydate'], function(){
		var form = layui.form,
			laydate = layui.laydate,
			img_type = "",
			img_index = 0,
            data_arr = [],
			repeat_flag = false; //防重复标识
			
		form.render();

		//初始化工作日
		var workWeek = "{$shop_info.work_week}",
				workArr = workWeek.split(",");

		for (var i = 0; i < workArr.length; i++){
			$("input[name=work_week"+ workArr[i] +"]").prop("checked",true);
		}

		//获取 - 开始时间
		var start_hours, start_minutes, start_seconds;
		laydate.render({
			elem: '#start_time',
			type: 'time',
			done: function(value, date){
				start_hours = date.hours;
				start_minutes = date.minutes;
				start_seconds = date.seconds;
				$(".start-time").val(ns.date_to_time(date.year + "-" + date.month + "-" + date.date + " " + date.hours + ":" + date.minutes + ":" + date.seconds))
			}
		});

		//获取 - 结束时间
		laydate.render({
			elem: '#end_time',
			type: 'time',
			done: function(value, date){
				$(".end-time").val(ns.date_to_time(date.year + "-" + date.month + "-" + date.date + " " + date.hours + ":" + date.minutes + ":" + date.seconds))
			}
		});

		form.render();

		form.on('submit(save)', function(data){
			saveData = data;
			var obj = $("img.img_prev[data-prev='1']");
			totalUploadNum = obj.length;

			if(totalUploadNum > 0){
				obj.each(function(){
					var actionId = $(this).attr('data-action-id');
					$(actionId).click();
				})
			}else{
				saveFunc();
			}
		});

		// 店铺LOGO
		logo_upload = new Upload({
			elem: '#logoUpload'
			,auto: false //选择文件后不自动上传
			,bindAction: '#btom_two' //指向一个按钮触发上传
			,callback: function (res) {
				if(res.code >= 0){
					//验证，增加是否上传完成
					completeUploadNum += 1;
					saveData.field.logo = res.data.pic_path;
					if(completeUploadNum == totalUploadNum){
						saveFunc();
					}
				}
			}
		});

		// 店铺方形LOGO
		logo_square_upload = new Upload({
			elem: '#logo_squareUpload'
			,auto: false //选择文件后不自动上传
			,bindAction: '#btom_three' //指向一个按钮触发上传
			,callback: function (res) {
				if(res.code >= 0){
					//验证，增加是否上传完成
					completeUploadNum += 1;
					saveData.field.logo_square = res.data.pic_path;
					if(completeUploadNum == totalUploadNum){
						saveFunc();
					}
				}
			}
		});

		// 店铺头像
		// var avatar_upload = new Upload({
		// 	elem: '#avatarUpload'
		// });
		//
		// // 店铺大图
		// var banner_upload = new Upload({
		// 	elem: '#bannerUpload'
		// });
		function saveFunc(){
			var data = saveData;
			//工作日
			var week_arr = [];
			$("#work_week input").each(function () {
				if ($(this).is(":checked")) {
					week_arr.push($(this).val());
				}
			});

			data.field.work_week = week_arr.toString();

			// 删除图片
			if(!data.field.logo) logo_upload.delete();
			if(!data.field.logo_square) logo_square_upload.delete();

			if (repeat_flag) return;
			repeat_flag = true;

			$.ajax({
				type: 'POST',
				url: ns.url("shop/shop/config"),
				data: data.field,
				dataType: 'JSON',
				sync: false,
				success: function(res) {
					layer.msg(res.message);
					repeat_flag = false;
					if (res.code == 0) {
						location.reload();
					}
				}
			});
		}

	});
	
	$("input[name='domain_name']").change(function(){
		var domain_name = $("input[name='domain_name']").val();
		$.ajax({
			type: 'POST',
			url: ns.url("shop/config/h5DomainName"),
			data:{
				"domain_name" : domain_name
			},
			dataType: 'JSON',
			success: function(res) {
				layer.msg(res.message);
			}
		})
	})
	function showDemo(){
	    layer.open({
	        title: '查看示例',
	        type: 1,
	        area: ['500px', '660px'],
	        content: '<img style="margin:20px 80px;" src="SHOP_IMG/dayang.png">'
	    })
	}

</script>
{/block}